CSS ஃபில்டர் விளைவுகள்: உலாவியில் பட செயலாக்கம்

வலை மேம்பாட்டின் மாறும் உலகில், காட்சி ஈர்ப்பு மிகவும் முக்கியமானது. CSS ஃபில்டர் விளைவுகள், பல சமயங்களில் வெளிப்புற பட எடிட்டிங் மென்பொருளின் தேவையை நீக்கி, உலாவியிலேயே நேரடியாக படங்களையும் கூறுகளையும் கையாள ஒரு சக்திவாய்ந்த மற்றும் திறமையான வழியை வழங்குகின்றன. இந்தக் கட்டுரை, அடிப்படை செயல்பாடுகள் முதல் மேம்பட்ட நுட்பங்கள் மற்றும் தனிப்பயன் ஃபில்டர் செயல்பாடுகள் வரை CSS ஃபில்டர்களின் பல்திறனை ஆராய்கிறது.

CSS ஃபில்டர் விளைவுகள் என்றால் என்ன?

CSS ஃபில்டர் விளைவுகள் என்பது CSS பண்புகளின் தொகுப்பாகும், அவை உலாவியில் காண்பிக்கப்படுவதற்கு முன்பு கூறுகளுக்கு காட்சி விளைவுகளைப் பயன்படுத்த உங்களை அனுமதிக்கின்றன. இந்த விளைவுகள் Adobe Photoshop அல்லது GIMP போன்ற பட எடிட்டிங் மென்பொருளில் காணப்படும் விளைவுகளைப் போலவே இருக்கும். அவை உங்கள் வலைப்பக்கங்களில் உள்ள படங்கள் மற்றும் பிற காட்சி உள்ளடக்கத்தை மேம்படுத்த, மாற்றியமைக்க மற்றும் அழகுபடுத்த பரந்த அளவிலான விருப்பங்களை வழங்குகின்றன.

முன்பே திருத்தப்பட்ட படங்களை மட்டும் சார்ந்திருக்காமல், CSS ஃபில்டர்கள் நிகழ்நேர பட செயலாக்கத்தை செயல்படுத்துகின்றன, இது உங்கள் வலைத்தளத்தின் அழகியலில் அதிக நெகிழ்வுத்தன்மையையும் கட்டுப்பாட்டையும் வழங்குகிறது. இது குறிப்பாக ரெஸ்பான்சிவ் வடிவமைப்புகளுக்கு பயனுள்ளதாக இருக்கும், அங்கு படங்கள் வெவ்வேறு திரை அளவுகள் மற்றும் தெளிவுத்திறன்களுக்கு ஏற்ப மாற வேண்டும்.

அடிப்படை CSS ஃபில்டர் பண்புகள்

CSS ஃபில்டர்கள் filter என்ற பண்பைப் பயன்படுத்திப் பயன்படுத்தப்படுகின்றன. இந்த பண்பின் மதிப்பு விரும்பிய விளைவைக் குறிப்பிடும் ஒரு செயல்பாடாகும். மிகவும் பொதுவான CSS ஃபில்டர் செயல்பாடுகளின் மேலோட்டம் இங்கே:

• blur(): உறுப்புக்கு ஒரு காஸியன் மங்கலைப் பயன்படுத்துகிறது. மதிப்பு அதிகமாக இருந்தால், உறுப்பு அதிகமாக மங்கலாக மாறும்.
• brightness(): உறுப்பின் பிரகாசத்தை சரிசெய்கிறது. 1-ஐ விட அதிகமான மதிப்புகள் பிரகாசத்தை அதிகரிக்கும், அதே சமயம் 1-ஐ விட குறைவான மதிப்புகள் அதைக் குறைக்கும்.
• contrast(): உறுப்பின் மாறுபாட்டை சரிசெய்கிறது. 1-ஐ விட அதிகமான மதிப்புகள் மாறுபாட்டை அதிகரிக்கும், அதே சமயம் 1-ஐ விட குறைவான மதிப்புகள் அதைக் குறைக்கும்.
• grayscale(): உறுப்பை கிரேஸ்கேலுக்கு மாற்றுகிறது. 1 (அல்லது 100%) மதிப்பு நிறத்தை முழுமையாக நீக்குகிறது, அதே சமயம் 0 மதிப்பு உறுப்பை மாற்றாமல் விடுகிறது.
• hue-rotate(): வண்ண வட்டத்தில் உறுப்பின் சாயலை சுழற்றுகிறது. மதிப்பு டிகிரிகளில் குறிப்பிடப்படுகிறது.
• invert(): உறுப்பின் வண்ணங்களைத் தலைகீழாக மாற்றுகிறது. 1 (அல்லது 100%) மதிப்பு வண்ணங்களை முழுமையாகத் தலைகீழாக மாற்றுகிறது, அதே சமயம் 0 மதிப்பு உறுப்பை மாற்றாமல் விடுகிறது.
• opacity(): உறுப்பின் ஒளிபுகும் தன்மையை சரிசெய்கிறது. 0 மதிப்பு உறுப்பை முழுமையாக ஒளிபுகுவதாக ஆக்குகிறது, அதே சமயம் 1 மதிப்பு அதை முழுமையாக ஒளிபுகாததாக ஆக்குகிறது.
• saturate(): உறுப்பின் செறிவை சரிசெய்கிறது. 1-ஐ விட அதிகமான மதிப்புகள் செறிவை அதிகரிக்கும், அதே சமயம் 1-ஐ விட குறைவான மதிப்புகள் அதைக் குறைக்கும்.
• sepia(): உறுப்புக்கு ஒரு செபியா டோனைப் பயன்படுத்துகிறது. 1 (அல்லது 100%) மதிப்பு உறுப்புக்கு முழு செபியா விளைவைக் கொடுக்கிறது, அதே சமயம் 0 மதிப்பு உறுப்பை மாற்றாமல் விடுகிறது.
• drop-shadow(): உறுப்புக்கு ஒரு நிழலைச் சேர்க்கிறது. இந்தச் செயல்பாடு கிடைமட்ட மற்றும் செங்குத்து ஆஃப்செட், மங்கல் ஆரம் மற்றும் நிழலின் நிறம் உட்பட பல அளவுருக்களை எடுக்கிறது.

நடைமுறை எடுத்துக்காட்டுகள்

CSS ஃபில்டர் விளைவுகளை எவ்வாறு பயன்படுத்துவது என்பதற்கான சில நடைமுறை எடுத்துக்காட்டுகளைப் பார்ப்போம்:

எடுத்துக்காட்டு 1: ஒரு படத்தை மங்கலாக்குதல்

ஒரு படத்தை மங்கலாக்க, நீங்கள் blur() ஃபில்டர் செயல்பாட்டைப் பயன்படுத்தலாம். பின்வரும் CSS குறியீடு ஒரு படத்திற்கு 5-பிக்சல் மங்கலைப் பயன்படுத்தும்:

img {
  filter: blur(5px);
}

எடுத்துக்காட்டு 2: பிரகாசம் மற்றும் மாறுபாட்டை சரிசெய்தல்

ஒரு படத்தின் பிரகாசம் மற்றும் மாறுபாட்டை சரிசெய்ய, நீங்கள் brightness() மற்றும் contrast() ஃபில்டர் செயல்பாடுகளைப் பயன்படுத்தலாம். பின்வரும் CSS குறியீடு ஒரு படத்தின் பிரகாசம் மற்றும் மாறுபாட்டை அதிகரிக்கும்:

img {
  filter: brightness(1.2) contrast(1.1);
}

எடுத்துக்காட்டு 3: கிரேஸ்கேல் விளைவை உருவாக்குதல்

ஒரு கிரேஸ்கேல் விளைவை உருவாக்க, நீங்கள் grayscale() ஃபில்டர் செயல்பாட்டைப் பயன்படுத்தலாம். பின்வரும் CSS குறியீடு ஒரு படத்தை கிரேஸ்கேலுக்கு மாற்றும்:

img {
  filter: grayscale(100%);
}

எடுத்துக்காட்டு 4: ஒரு செபியா டோனைப் பயன்படுத்துதல்

ஒரு செபியா டோனைப் பயன்படுத்த, நீங்கள் sepia() ஃபில்டர் செயல்பாட்டைப் பயன்படுத்தலாம். பின்வரும் CSS குறியீடு ஒரு படத்திற்கு செபியா டோனைப் பயன்படுத்தும்:

img {
  filter: sepia(80%);
}

எடுத்துக்காட்டு 5: ஒரு டிராப் ஷேடோவைச் சேர்த்தல்

ஒரு டிராப் ஷேடோவைச் சேர்க்க, நீங்கள் drop-shadow() ஃபில்டர் செயல்பாட்டைப் பயன்படுத்தலாம். பின்வரும் CSS குறியீடு ஒரு படத்திற்கு டிராப் ஷேடோவைச் சேர்க்கும்:

img {
  filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
}

பல ஃபில்டர்களை இணைத்தல்

CSS ஃபில்டர்களின் மிகவும் சக்திவாய்ந்த அம்சங்களில் ஒன்று, சிக்கலான காட்சி விளைவுகளை உருவாக்க பல ஃபில்டர்களை இணைக்கும் திறன் ஆகும். நீங்கள் ஒரே filter பண்பில் பல ஃபில்டர் செயல்பாடுகளை ஒன்றாக இணைக்கலாம். உலாவி, ஃபில்டர்களை பட்டியலிடப்பட்ட வரிசையில் பயன்படுத்தும்.

எடுத்துக்காட்டாக, ஒரு விண்டேஜ் புகைப்பட விளைவை உருவாக்க, நீங்கள் sepia(), contrast(), மற்றும் blur() ஃபில்டர்களை இணைக்கலாம்:

img {
  filter: sepia(0.6) contrast(1.2) blur(2px);
}

செயல்திறன் கருத்தாய்வுகள்

CSS ஃபில்டர்கள் படங்களைக் கையாள ஒரு வசதியான வழியை வழங்கும் அதே வேளையில், செயல்திறனைக் கருத்தில் கொள்வது அவசியம். ஒரு பக்கத்தில் பல கூறுகளுக்கு சிக்கலான ஃபில்டர்களைப் பயன்படுத்துவது, குறிப்பாக பழைய சாதனங்கள் அல்லது உலாவிகளில், காட்சிப்படுத்தல் செயல்திறனை பாதிக்கலாம். செயல்திறனை மேம்படுத்துவதற்கான சில குறிப்புகள் இங்கே:

• ஃபில்டர்களை அளவோடு பயன்படுத்தவும்: தேவைப்படும்போது மட்டும் ஃபில்டர்களைப் பயன்படுத்துங்கள் மற்றும் அவற்றை அதிகமாகப் பயன்படுத்துவதைத் தவிர்க்கவும்.
• பட அளவுகளை மேம்படுத்துங்கள்: கோப்பு அளவுகளைக் குறைக்கவும் ஏற்றுதல் நேரத்தை மேம்படுத்தவும் உங்கள் படங்கள் வலைக்கு சரியாக மேம்படுத்தப்பட்டுள்ளன என்பதை உறுதிப்படுத்திக் கொள்ளுங்கள்.
• வன்பொருள் முடுக்கத்தைப் பயன்படுத்தவும்: பெரும்பாலான நவீன உலாவிகள் CSS ஃபில்டர்களுக்கு வன்பொருள் முடுக்கத்தைப் பயன்படுத்துகின்றன, ஆனால் transform: translateZ(0); பண்பை உறுப்புக்கு சேர்ப்பதன் மூலம் இதை மேலும் ஊக்குவிக்கலாம். இது உலாவியை உறுப்பை அதன் சொந்த லேயரில் ரெண்டர் செய்ய கட்டாயப்படுத்துகிறது, இது செயல்திறனை மேம்படுத்தும்.
• வெவ்வேறு சாதனங்களில் சோதிக்கவும்: ஃபில்டர்கள் நன்றாக செயல்படுகின்றனவா என்பதை உறுதிப்படுத்த உங்கள் வலைத்தளத்தை பல்வேறு சாதனங்கள் மற்றும் உலாவிகளில் எப்போதும் சோதிக்கவும்.

உலாவி இணக்கத்தன்மை

CSS ஃபில்டர் விளைவுகள் Chrome, Firefox, Safari மற்றும் Edge உள்ளிட்ட நவீன உலாவிகளால் பரவலாக ஆதரிக்கப்படுகின்றன. இருப்பினும், இன்டர்நெட் எக்ஸ்ப்ளோரரின் பழைய பதிப்புகள் அனைத்து ஃபில்டர் செயல்பாடுகளையும் ஆதரிக்காமல் இருக்கலாம். உற்பத்தி வலைத்தளங்களில் CSS ஃபில்டர்களைப் பயன்படுத்துவதற்கு முன்பு உலாவி இணக்கத்தன்மையைச் சரிபார்ப்பது அவசியம்.

Can I Use (caniuse.com) போன்ற வலைத்தளங்களைப் பயன்படுத்தி வெவ்வேறு உலாவிகள் மற்றும் பதிப்புகளில் CSS ஃபில்டர் விளைவுகளின் இணக்கத்தன்மையைச் சரிபார்க்கலாம்.

பயன்பாட்டு நிகழ்வுகள் மற்றும் பயன்பாடுகள்

CSS ஃபில்டர் விளைவுகள் பல்வேறு பயன்பாடுகளில் பயன்படுத்தப்படலாம், அவற்றுள்:

• படக் காட்சியகங்கள்: தனித்துவமான மற்றும் பார்வைக்கு ஈர்க்கும் படக் காட்சியகங்களை உருவாக்க ஃபில்டர்களைப் பயன்படுத்தவும்.
• தயாரிப்புக் காட்சிகள்: விவரங்களை முன்னிலைப்படுத்தவும் மற்றும் மிகவும் ஈர்க்கக்கூடிய ஷாப்பிங் அனுபவத்தை உருவாக்கவும் தயாரிப்பு படங்களை மேம்படுத்தவும்.
• ஹீரோ பகுதிகள்: நுட்பமான மங்கல், பிரகாசம் அல்லது மாறுபாடு சரிசெய்தல்களுடன் ஹீரோ பிரிவுகளுக்கு காட்சி ஆர்வத்தைச் சேர்க்கவும்.
• ஊடாடும் விளைவுகள்: ஹோவர் அல்லது கிளிக்கின் போது ஃபில்டர் மதிப்புகளை மாற்றுவதன் மூலம் ஊடாடும் விளைவுகளை உருவாக்கவும்.
• அணுகல்தன்மை: பார்வை குறைபாடுள்ள பயனர்களுக்கு மாறுபாட்டை அதிகரிப்பது போன்ற உங்கள் வலைத்தளத்தின் அணுகலை மேம்படுத்த ஃபில்டர்களைப் பயன்படுத்தவும்.
• தீமிங் மற்றும் பிராண்டிங்: தளத்தின் தீம்கள் அல்லது பிராண்ட் வண்ணங்களுக்கு படங்களின் வண்ணங்களை மாற்றியமைக்கவும். உதாரணமாக, டார்க் மோட் மற்றும் லைட் மோட் தள வடிவமைப்பிற்கு ஒரு லோகோவின் வண்ணத் திட்டத்தை நுட்பமாக மாற்றுவது.

அடிப்படை ஃபில்டர்களைத் தாண்டி: தனிப்பயன் ஃபில்டர் செயல்பாடுகள் (filter: url())

உள்ளமைக்கப்பட்ட CSS ஃபில்டர் செயல்பாடுகள் நிறைய நெகிழ்வுத்தன்மையை வழங்கினாலும், நீங்கள் ஸ்கேலபிள் வெக்டர் கிராபிக்ஸ் (SVG) ஃபில்டர்களைப் பயன்படுத்தி தனிப்பயன் ஃபில்டர் செயல்பாடுகளையும் உருவாக்கலாம். இது இன்னும் மேம்பட்ட மற்றும் ஆக்கப்பூர்வமான படக் கையாளுதலுக்கு அனுமதிக்கிறது.

ஒரு தனிப்பயன் ஃபில்டர் செயல்பாட்டைப் பயன்படுத்த, நீங்கள் ஒரு SVG கோப்பில் ஃபில்டரை வரையறுத்து, பின்னர் அதை உங்கள் CSS இல் filter: url() பண்பைப் பயன்படுத்தி குறிப்பிட வேண்டும்.

எடுத்துக்காட்டு: ஒரு தனிப்பயன் வண்ண அணி ஃபில்டரை உருவாக்குதல்

ஒரு வண்ண அணி ஃபில்டர், குணகங்களின் அணியைப் பயன்படுத்தி ஒரு படத்தின் வண்ணங்களை மாற்ற உங்களை அனுமதிக்கிறது. இது வண்ணத் திருத்தம், வண்ண மாற்றுதல் மற்றும் வண்ணக் கையாளுதல் போன்ற பரந்த அளவிலான விளைவுகளை உருவாக்கப் பயன்படுத்தப்படலாம்.

முதலில், பின்வரும் உள்ளடக்கத்துடன் ஒரு SVG கோப்பை (உதாரணமாக, custom-filter.svg) உருவாக்கவும்:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="color-matrix">
      <feColorMatrix type="matrix"
        values="1 0 0 0 0
                0 1 0 0 0
                0 0 1 0 0
                0 0 0 1 0" />
    </filter>
  </defs>
</svg>

இந்த எடுத்துக்காட்டில், feColorMatrix உறுப்பு color-matrix ஐடி உடன் ஒரு வண்ண அணி ஃபில்டரை வரையறுக்கிறது. values பண்புக்கூறு அணி குணகங்களைக் குறிப்பிடுகிறது. இயல்புநிலை அணி (identity matrix) வண்ணங்களை மாற்றாமல் விடுகிறது. வண்ணங்களைக் கையாள நீங்கள் values பண்புக்கூறை மாற்றியமைக்க வேண்டும்.

அடுத்து, உங்கள் CSS இல் SVG ஃபில்டரைக் குறிப்பிடவும்:

img {
  filter: url("custom-filter.svg#color-matrix");
}

இது படத்திற்கு தனிப்பயன் வண்ண அணி ஃபில்டரைப் பயன்படுத்தும். வெவ்வேறு வண்ண விளைவுகளை உருவாக்க நீங்கள் SVG கோப்பில் உள்ள values பண்புக்கூறை மாற்றியமைக்கலாம். எடுத்துக்காட்டுகளில் செறிவு அதிகரித்தல், வண்ணங்களைத் தலைகீழாக மாற்றுதல் அல்லது ஒரு டுவோடோன் விளைவை உருவாக்குதல் ஆகியவை அடங்கும்.

அணுகல்தன்மை கருத்தாய்வுகள்

CSS ஃபில்டர்களைப் பயன்படுத்தும் போது, அணுகல்தன்மையை கருத்தில் கொள்வது மிகவும் முக்கியம். ஃபில்டர்களை அதிகமாகப் பயன்படுத்துவது அல்லது தவறாகப் பயன்படுத்துவது பார்வை குறைபாடுள்ள பயனர்களுக்கு உள்ளடக்கத்தைப் புரிந்துகொள்வதை கடினமாக்கும்.

• போதுமான மாறுபாட்டை உறுதி செய்யவும்: வாசிப்புத்திறனை மேம்படுத்த உரைக்கும் பின்னணிக்கும் இடையில் மாறுபாட்டை அதிகரிக்க ஃபில்டர்களைப் பயன்படுத்தவும்.
• மாற்று உரையை வழங்கவும்: படங்களுக்கு எப்போதும் விளக்கமான மாற்று உரையை வழங்கவும், இதனால் படங்களைப் பார்க்க முடியாத பயனர்கள் அவற்றின் உள்ளடக்கத்தைப் புரிந்து கொள்ள முடியும்.
• ஒளிரும் அல்லது மினுமினுக்கும் விளைவுகளைத் தவிர்க்கவும்: ஒளிரும் அல்லது மினுமினுக்கும் விளைவுகளை உருவாக்கும் ஃபில்டர்களைப் பயன்படுத்தும் போது எச்சரிக்கையாக இருங்கள், ஏனெனில் இவை ஒளிஉணர்திறன் வலிப்பு நோயுள்ள பயனர்களுக்கு வலிப்பைத் தூண்டலாம்.
• உதவித் தொழில்நுட்பங்களுடன் சோதிக்கவும்: ஃபில்டர்கள் பயனர் அனுபவத்தில் தலையிடவில்லை என்பதை உறுதிப்படுத்த, ஸ்கிரீன் ரீடர்கள் போன்ற உதவித் தொழில்நுட்பங்களுடன் உங்கள் வலைத்தளத்தைச் சோதிக்கவும்.

எதிர்காலப் போக்குகள் மற்றும் மேம்பாடுகள்

CSS ஃபில்டர் விளைவுகள் தொடர்ந்து உருவாகி வருகின்றன, புதிய ஃபில்டர் செயல்பாடுகள் மற்றும் திறன்கள் CSS விவரக்குறிப்பில் சேர்க்கப்பட்டு வருகின்றன. உலாவிகள் CSS ஃபில்டர்களுக்கான தங்கள் ஆதரவைத் தொடர்ந்து மேம்படுத்துவதால், வலை வடிவமைப்பில் இந்த விளைவுகளின் இன்னும் புதுமையான மற்றும் ஆக்கப்பூர்வமான பயன்பாடுகளை நாம் எதிர்பார்க்கலாம்.

ஒரு நம்பிக்கைக்குரிய போக்கு மேலும் மேம்பட்ட தனிப்பயன் ஃபில்டர் செயல்பாடுகளின் வளர்ச்சியாகும், இது டெவலப்பர்களை இன்னும் சிக்கலான மற்றும் நுட்பமான காட்சி விளைவுகளை உருவாக்க அனுமதிக்கும்.

முடிவுரை

CSS ஃபில்டர் விளைவுகள் உலாவியிலேயே படங்கள் மற்றும் கூறுகளை மேம்படுத்தவும் மாற்றியமைக்கவும் ஒரு சக்திவாய்ந்த மற்றும் பல்துறை வழியை வழங்குகின்றன. பிரகாசம் மற்றும் மாறுபாடு போன்ற அடிப்படை சரிசெய்தல்கள் முதல் மங்கலாக்குதல் மற்றும் வண்ணக் கையாளுதல் போன்ற சிக்கலான விளைவுகள் வரை, CSS ஃபில்டர்கள் பார்வைக்கு ஈர்க்கக்கூடிய மற்றும் ஈடுபாட்டுடன் கூடிய வலை அனுபவங்களை உருவாக்க பரந்த அளவிலான விருப்பங்களை வழங்குகின்றன. CSS ஃபில்டர்களின் கொள்கைகளைப் புரிந்துகொண்டு செயல்திறன் மற்றும் அணுகல்தன்மைக்கான சிறந்த நடைமுறைகளைப் பின்பற்றுவதன் மூலம், நீங்கள் இந்த விளைவுகளைப் பயன்படுத்தி பிரமிக்க வைக்கும் மற்றும் பயனர் நட்பு வலைத்தளங்களை உருவாக்கலாம்.

CSS ஃபில்டர்களின் படைப்பு சாத்தியங்களைத் தழுவி, உங்கள் வலை வடிவமைப்புகளை அடுத்த கட்டத்திற்கு உயர்த்துங்கள்!

மேலும் அறிய உதவும் ஆதாரங்கள்

• MDN Web Docs: CSS filter property
• CSS-Tricks: CSS filter property
• Can I Use: Browser compatibility for CSS filters